<template>
    <div id="map2D" class="pie-map"></div>
</template>

<script>
import Map2D from "../lib/map2D";
var esri = require("esri-leaflet");
export default {
    name: "pieMap",
    props: {
        // svg底图
        isSvg: {
            type: Boolean,
            default: false,
        },
        map: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            src: "",
            mapType: "3D",
            selectBool: true,
            maps: null,
            instance: null,
            switchBool: false,
            x: 0,
            y: 0,
        };
    },

    mounted() {
        this.$nextTick(() => {
            if (!this.maps) {
                this.init();
            }
        });
    },

    methods: {
        init() {
            this.src = [
                {
                    type: "vector",
                    // zIndex: 1,
                    url: "http://10.1.1.141:6080/arcgis/rest/services/%E8%A1%8C%E6%94%BF%E5%8C%BA/MapServer",
                },
            ];
            // "http://10.1.100.152:8866/clparcgisserver/arcgis/rest/services/影像20201130/MapServer";
            let map = new Map2D({
                baseUrl: this.src,
            });
            map.init(this.isSvg);
            this.$emit("update:map", map);
            this.$emit("load");
        },
        showTools(type) {
            this.$emit("showTools", type);
            if (type == "监控") {
                const markList = [
                    [27.5152587890625, 118.916015625],
                    [27.294158935546875, 118.9434814453125],
                    [27.217254638671875, 118.76014709472656],
                    [27.40814208984375, 118.66950988769531],
                    [27.46856689453125, 118.92219543457031],
                ];
                for (let item of markList) {
                    this.$map
                        .marker(item, {
                            icon: new L.Icon({
                                className: "lmap-icon",
                                iconUrl: require("@/assets/maps/monitor_icon.png"),
                                iconSize: [36, 48],
                            }),
                        })
                        .addTo(this.maps);
                }
            }
        },
        changeSelect() {
            this.selectBool = !this.selectBool;
        },
        cutGisPanel() {
            this.switchBool = this.switchBool === true ? false : true;
        },
        swClick() {
            this.mapType = "3D";
        },
        dzClick() {
            this.mapType = "2D";
        },
        yxClick() {
            this.mapType = "2D";
        },
        voiceClick() {
            let { main, page, module } = this.$route.params;
            // console.log(this.$route.params, "params");
            this.$router.push({
                path: "/voice",
                query: {
                    main,
                    page,
                    module,
                },
            });
            this.$emit("voice");
        },
        swiper(a, b, c) {
            // console.log(a, b, c, "params");
        },
        focus(a, b, c) {
            // console.log(a, b, c, "params");
        },
    },
    beforeDestroy() {},
    watch: {
        // mapIsChange(newVlaue,oldValue){
        //     if(newVlaue){
        //         this.maps.flyTo([27.36,118.89],17);
        //         // this.maps.setZoom(14)
        //     }else{
        //             this.maps.flyTo([27.365398,118.858661],10);
        //         // this.maps.setZoom(10)
        //     }
        // }
    },
};
</script>

<style lang="scss" scoped>
.pie-map {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
}
</style>